<template>
	<el-select
		v-model="businessModel"
		:placeholder="placeholder"
		clearable
		:disabled="disabled"
		:value="value"
		:popper-append-to-body="false"
		@change="handleChange"
		@blur="handleBlur"
		@focus="handleFocus"
	>
		<el-option
			v-for="(item, index) in businessModels"
			:key="index"
			:label="item.label"
			:value="item.value"
		></el-option>
	</el-select>
</template>

<script>
import i18n from '@/locales'

export default {
	name: 'BusinessModelSelector',
	props: {
		value: {
			type: [String, Number, Array],
			required: false,
			default: ''
		},
		defaultValue: { type: String, default: '' },
		hideAllModel: { type: Boolean, default: true },
		clearable: { type: Boolean, default: true },
		placeholder: { type: String, default: i18n.t('common.select_all') },
		disabled: { type: Boolean, default: false }
	},
	data() {
		return {}
	},
	watch: {
		defaultValue: {
			handle() {
				if (this.defaultValue === '3') {
					this.value = '0'
				}
			}
		}
	},
	created() {
		if (this.defaultValue === '3') {
			this.value = '0'
		}
	},
	computed: {
		businessModels() {
			const BUSINESS_MODELS = [
				{ value: '0', label: '信用+现金模式' },
				{ value: '1', label: '现金模式' },
				{ value: '2', label: '信用模式' }
			]

			let options = [...BUSINESS_MODELS]
			if (this.hideAllModel)
				options = options.filter((item) => item.value !== '0')
			console.log(options, 'optionsoptionsoptions')
			return options
		},
		businessModel: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit('input', val || undefined)
			}
		}
	},
	methods: {
		handleChange(val) {
			this.$emit('change', val)
		},
		handleBlur(e) {
			this.$emit('blur', e)
		},
		handleFocus(e) {
			this.$emit('focus', e)
		}
	}
}
</script>
